<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo15-渲染函数-基础02</title>
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app">
      <my-heading></my-heading>
    </div>
</body>

<script>

/**
 * 这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API。
 * 
 * 不懂。。。
 *  
 */ 
Vue.component('my-heading', {
  render: function (createElement) {
      console.log(this.$slots);
    return createElement(
      'h1' ,
      this.blogTitle
    )
  },
  data:function(){
    return {
      blogTitle:'hello title'
    }
  }
})

var app = new Vue({
  el: '#app'
});
</script>
</html>